<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th id="th-age">年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>张三</td>
                    <td>21</td>
                    <td>女</td>
                    <td>删除</td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <script>
       var addbtn = document.querySelector('#addBtn')
       var sortbtn = document.querySelector('#sortBtn')
       var username = document.querySelector('#username')
       var age = document.querySelector('#age')
       var gender = document.querySelector('#gender')
       var tablebox = document.querySelector('#table')
       var tbody = document.querySelector('#table tbody')
       var thage = document.querySelector('#th-age')
       var arr = []

           addbtn.onclick = function(){         
                var tr = tbody.insertRow()
                    tr.insertCell().innerHTML = username.value
                    tr.insertCell().innerHTML = age.value
                    tr.insertCell().innerHTML = gender.value
                    tr.insertCell().innerHTML = '<button class="delete-btn"></button>';                     
                    arr.push(tr) 
                    
           }

           tbody.onclick = function(event){
                if(event.target.className === 'delete-btn'){
                  var index = event.target.parentElement.parentElement.rowIndex
                      tbody.deleteRow(index-1)       
                       arr.splice(index-1,1)     
                }
                /* console.log(event.target.parentElement) */
           }

           var up = true
           sortbtn.onclick = function(){
            if(up){
                    sortup(arr)
                    up = false
                    thage.style.backgroundImage =  "url(images/up.png)"
                    thage.style.backgroundRepeat = "no-repeat"
                }else {
                    sortdown(arr)
                    up = true
                    thage.style.backgroundImage =  "url(images/down.png)"
                    thage.style.backgroundRepeat = "no-repeat"
                    thage.style.backgroundPosition ='5px 5px'
                }
                 
                arr.forEach(function(add,index){
                    tbody.appendChild(add)
                })
           }

           function sortdown(arr){
                return [].sort.call(arr,function(tr1,tr2){
                    return tr2.querySelectorAll('td')[1].innerHTML-tr1.querySelectorAll('td')[1].innerHTML
                })
               
           }   
           
           function sortup(arr){
                return [].sort.call(arr,function(tr1,tr2){
                    return tr1.querySelectorAll('td')[1].innerHTML-tr2.querySelectorAll('td')[1].innerHTML
                })
               
           }    
    </script>
</body>

</html>